<template>
  <div class="salarys-container">
    <div class="app-container">
      <el-row class="top">
        <el-col :span="4" class="wrapper topText" style="height:30px;">
          <span>姓名</span>
          <el-button type="text" style=" font-size: 16px;" @click="$router.push('/form')">退出</el-button>
          <el-button type="text" style=" font-size: 16px;" @click="$router.push('/')">后台</el-button>
        </el-col>
      </el-row>
      <el-row class="nav">
        <el-col :span="16" class="wrapper">
          <el-menu
            default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#f8be03"
            text-color="#fff"
            active-text-color="#333"
          >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">申请</el-menu-item>
            <el-menu-item index="3">处理中心</el-menu-item>
            <el-menu-item index="4">个人中心</el-menu-item>
            <el-menu-item index="5">公司信息</el-menu-item>
            <el-menu-item index="6">关于我们</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row class="banner">
        <el-col :span="16" class="wrapper">
          <div class="swiper-container swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img
                  src="https://img2.baidu.com/it/u=830955410,607967074&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250"
                  alt=""
                >
              </div>
              <div class="swiper-slide">
                <img
                  src="https://img2.baidu.com/it/u=432610744,191110398&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"
                  alt=""
                >
              </div>
              <div class="swiper-slide">
                <img
                  src="https://img2.baidu.com/it/u=4185362878,3892663076&fm=253&fmt=auto&app=120&f=JPEG?w=749&h=500"
                  alt=""
                >
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination" />

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" />
            <div class="swiper-button-next" />
          </div>
        </el-col>
      </el-row>

      <el-row class="content">
        <el-col :span="8" class="contenta">
          <el-card class="box-card">
            <div slot="header" class="clearfix content-header">
              <span>通知公告</span>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
              {{ '龙江银行股份有限公司2023年校园招聘公告 ' + o }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="7" class="contentb">
          <el-card class="box-card">
            <div slot="header" class="clearfix content-header">
              <span>通知公告</span>
            </div>
            <div v-for="o in 10" :key="o" class="text item">
              {{ '龙江银行股份有限公司2023年校园招聘公告 ' + o }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="footer">
        <el-col :span="4" class="footerItem">
          <img src="https://www.lj-bank.com/template/default/images/gray_logo.gif" alt="">
        </el-col>
        <el-col :span="4" class="footerItem">
          <p>
            网站声明 | 网站地图 | 营业网点 | 隐私保密条款
            公司地址：黑龙江省哈尔滨市道里区友谊路436号

            服务专线: 400-645-8888 黑ICP备10005658号-1

            本网站支持IPv6
          </p>
        </el-col>
        <el-col :span="4" class="footerItem">
          <div id="tm2008style" style="width:204px">
            <div style="display:flex;flex-direction:column;width:200px;flex-wrap:wrap;height:98px;">
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.12371.cn">共产党员网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.ccdi.gov.cn">中央纪委国家监委网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="http://www.gqt.org.cn">中国共青团网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.ljxfw.gov.cn">龙江先锋网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.gov.cn">中国政府网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.acftu.org">中华全国总工会网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.hlj.gov.cn">黑龙江政府网</a>
              </div>
              <div style="margin-bottom:6px;margin-right:10px;">
                <a href="https://www.hljjjjc.gov.cn">黑龙江省纪委监委网</a>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/js/swiper'
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper'
export default {
  name: 'Salarys',
  mounted() {
    new Swiper('.swiper-container', {
      // mousewheel: true, //滚轮
      // autoplay: { // 自动开始
      //   delay: 2500, // 时间间隔
      //   disableOnInteraction: false //* 手动操作轮播图后不会暂停*
      // },
      // loop: false, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true // 分页器可以点击
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    })
  },
  methods: {}
}
</script>

<style lang="scss">
.app-container {
  .wrapper {
    text-align: center;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .top {
    margin-top: -30px;
    background-color: #06579d;
    color: #fff;
    border-bottom: 2px solid rgb(27, 109, 84);
    .el-button {
      color: #fff;
      margin-left: 18px;
    }
    .topText {
      transform: translateX(330px);
    }
  }
  .nav {
    margin-bottom: 5px;
  }
  .banner {
    margin-bottom: 10px;
    border-radius: 10px;
    img {
      border-radius: 8px;
    }
  }
  .content {
    .contenta{
      margin-left: 350px;
    }
    .contentb{
      width: 670px;
      margin-left: 20px;
    }
    .el-card {
      background-color: #f2f2f2;
    }
  }
  .el-menu {
    display: flex;
    .el-menu-item {
      flex: 1;
    }
  }
  .clearfix {
    float: left;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    margin-left: 50%;
    margin-top: 20px;
    transform: translateX(-50%);

    .footerItem {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:first-child {
        margin-left: -160px;
      }
      &:last-child {
        margin-left: 300px;
        margin-right: -260px;
      }
    }
  }
  .swiper {
    height: 500px;
    .swiper-slide {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
